<template>
  <el-card class="supp-home-page">
    <div slot="header">
      <h1>内部管理页面</h1>
    </div>
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1"><router-link to="sentenceMaintain" style="text-decoration: none">句子管理</router-link></el-menu-item>
      <el-menu-item index="2"><router-link to="sentenceMaintain" style="text-decoration: none">单词管理</router-link></el-menu-item>
      <el-menu-item index="3"><router-link to="sentenceMaintain" style="text-decoration: none">语法管理</router-link></el-menu-item>
      <el-menu-item index="4"><router-link to="sentenceMaintain" style="text-decoration: none">动画背景图片</router-link></el-menu-item>
      <el-menu-item index="5"><router-link to="sentenceMaintain" style="text-decoration: none">字幕背景图片</router-link></el-menu-item>
      <el-menu-item index="6"><router-link to="sentenceMaintain" style="text-decoration: none">句子音频</router-link></el-menu-item>
      <el-menu-item index="7" disabled><router-link to="sentenceMaintain" style="text-decoration: none">账号管理</router-link></el-menu-item>
    </el-menu>
    <div class="supp-home-page-detail"><router-view /></div>
  </el-card>
</template>

<script>
export default {
  name: "SupportHomePage",
  data() {
    return {
      activeIndex: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style lang="scss">
body {
  background-color: black; //lightgoldenrodyellow;
  align-items: flex-start;
}

.supp-home-page {
  width: 1372px;
  margin-top: 25px;
  height: 1250px;
}

.supp-home-page-detail {
  margin-top: 20px;
  height: 1000px;
}
</style>